<template>
  <block height="570px">
    <div class="block-content">
      <div class="top">
        <div class="title">
          城市综合指数排名
        </div>
      </div>
      <div class="btn-wrap">
        <el-button-group>
          <el-button
            v-for="item in btns"
            :key="item.key"
            size="mini"
            :class="{ active: status === item.key }"
            @click="handleBtnClick(item.key)"
          >
            {{ item.value }}
          </el-button>
        </el-button-group>
        <el-button-group>
          <el-button
            size="mini"
            :class="{ active_2: order === 1 }"
            @click="handleOrder(1)"
          >
            前十
          </el-button>
          <el-button
            size="mini"
            :class="{ active_2: order === 2 }"
            @click="handleOrder(2)"
          >
            后十
          </el-button>
        </el-button-group>
      </div>
      <div class="middle">
        <div class="ranking-list">
          <div v-for="(item, index) in list" :key="item.id" class="item">
            <div class="number">
              {{ index + 1 }}
            </div>
            <div class="name">
              {{ item.name }}
            </div>
            <div class="line-wrap">
              <div class="line" :style="{ width: item.width }" />
            </div>
            <div class="value">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </block>
</template>

<script>
import { Block } from './index'
import { rankingBtns as btns } from '../config'

export default {
  name: 'RankingBlock',
  components: { Block },
  data() {
    return {
      btns,
      status: 1,
      order: 1,

      list: [
        { id: 1, name: '东北开原市', value: 5632 },
        { id: 2, name: '江西万载县', value: 5210 },
        { id: 3, name: '吉林', value: 5132 },
        { id: 4, name: '黑龙江', value: 4710 },
        { id: 5, name: '江苏', value: 4632 },
        { id: 6, name: '湖南', value: 4210 },
        { id: 7, name: '长沙', value: 3622 },
        { id: 8, name: '南宁', value: 3210 },
        { id: 9, name: '厦门', value: 3178 },
        { id: 10, name: '芜湖', value: 3000 }
      ]
    }
  },
  created() {
    this._formatList()
  },
  methods: {
    handleBtnClick(key) { // 条件点击
      this.status = key
    },

    handleOrder(key) { // 顺序点击
      this.order = key
      this._formatList()
    },

    _formatList() { // 格式化获取到的数据
      const { order, list } = this
      const maxValue = order === 1 ? list[0].value : list[9].value
      this.list = list.map(item => {
        item.width = item.value / maxValue * 200 + 'px'
        return item
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-top: 20px;
}
.middle {
  display: flex;
  justify-content: center;
}

.ranking-list {
  margin-top: 10px;

  .item {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 26px 0;

    .number {
      width: 18px;
      height: 18px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 18px;
      margin-right: 10px;
    }

    .name {
      font-size: 16px;
      width: 120px;
    }

    .line-wrap {
      width: 200px;
      margin-right: 30px;
      overflow: hidden;
    }

    .line {
      height: 6px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 1px;
      margin-right: 30px;
    }

    &:nth-of-type(1) {
      .number, .line {
        background-color: #ff7088;
      }
    }
    &:nth-of-type(2) {
      .number, .line {
        background-color: #fba232;
      }
    }
    &:nth-of-type(3) {
      .number, .line {
        background-color: #7765f7;
      }
    }
  }
}
</style>
